import React, { Component, PropTypes } from 'react'
import { Modal, Switch } from 'antd-mobile'
import { NavHeader } from '../common'

export default class PositionDetail extends Component {
  constructor() {
    super()
    this.state = {
      realTime: false,
      confirm: false,
    }
  }
  render() {
    const { visible, onClose, opBtn } = this.props
    const { realTime, confirm } = this.state
    return (
      <Modal
        visible={visible}
        closable={false}
        animated={false}
        className={`rt-position-detail-modal`}
      >
        <NavHeader title="持仓明细" onClick={onClose} />
        <div className={`cm-scrollable-container`}>
          {
            Array(10).fill(1).map(v => (
              <div key={Math.random()} className={`cm-row-box`}>
                <span className={`-left`}>开仓成本</span>
                <span>8.7(含赠金8.7元)</span>
              </div>
            ))
          }
        </div>

        {
          opBtn
          ? (
            <div
              className={`rt-op-btn`}
              onClick={() => {
                this.setState({confirm: true})
              }}
              >
              平 仓
            </div>
          )
          : null
        }

        {/*modal*/}
        <Modal
          title="平仓确认"
          transparent
          maskClosable={false}
          visible={!false && confirm}
          closable={false}
          footer={[
            { text: '取消', onPress: () => { this.setState({confirm: false}) } },
            { text: '平仓', onPress: () => { console.log('ok') } },
          ]}
        >
          <div className={`rt-info-box`}>
            <div>
              <span>品种</span>
              <span>东京</span>
            </div>
            <div>
              <span>最新价</span>
              <span>3127</span>
            </div>
            <div>
              <span>盈亏</span>
              <span className={`-diff-color`}>+24.00</span>
            </div>
          </div>
          <div className={`rt-switch-box`}>
            <span>按实时价格成交</span>
            <Switch
              checked={realTime}
              onChange={v => this.setState({realTime: v})}
            />
          </div>
        </Modal>
        <Modal
          className={`rt-cue-modal`}
          title="提示"
          transparent
          maskClosable={false}
          visible={false && confirm}
          closable={false}
          footer={[
            { text: '取消', onPress: () => { this.setState({confirm: false}) } },
            { text: '立即充值', onPress: () => { console.log('ok') } },
          ]}
        >
          <div className={`rt-info-box`}>
            <div className={`rt-cue-msg`}>可用资金不足，快去充值吧！</div>
          </div>
        </Modal>
      </Modal>
    )
  }
}

PositionDetail.defaultProps = {
  opBtn: false,
}

PositionDetail.propTypes = {
  visible: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
  opBtn: PropTypes.bool,
}